import MCascader from './components/MCascader.vue'
import MCheckbox from './components/MCheckbox.vue'
import MRadio from './components/MRadio.vue'
import MSelect from './components/MSelect.vue'
import UploadFile from './components/UploadFile.vue'
import UploadImage from './components/UploadImage.vue'
import WangEditor from './components/WangEditor.vue'

export interface ElComponent {
  [key: string]: any
}

const elComponents = ref<ElComponent>({
  input: {
    name: 'el-input',
    props: {
      type: 'text',
      clearable: true,
    },
  },
  'color-picker': {
    name: 'el-color-picker',
    props: {},
  },
  textarea: {
    name: 'el-input',
    props: {
      type: 'textarea',
      clearable: true,
    },
  },
  password: {
    name: 'el-input',
    props: {
      type: 'password',
      clearable: true,
      autocomplete: 'off',
    },
  },
  rate: {
    name: 'el-rate',
  },
  'month-day-picker': {
    name: 'el-date-picker',
    props: {
      format: 'MM-DD',
      valueFormat: 'MM-DD',
      type: 'date',
    },
  },
  'date-picker': {
    name: 'el-date-picker',
    props: {
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      type: 'date',
    },
  },
  'datetime-picker': {
    name: 'el-date-picker',
    props: {
      format: 'YYYY-MM-DD HH:mm',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      type: 'datetime',
    },
  },
  'month-picker': {
    name: 'el-date-picker',
    props: {
      format: 'YYYY-MM',
      valueFormat: 'YYYY-MM',
      type: 'month',
    },
  },
  editor: {
    name: markRaw(WangEditor),
  },
  select: {
    name: markRaw(MSelect),
  },
  cascader: {
    name: markRaw(MCascader),
  },
  checkbox: {
    name: markRaw(MCheckbox),
  },
  radio: {
    name: markRaw(MRadio),
  },
  'upload-file': {
    name: markRaw(UploadFile),
  },
  'upload-image': {
    name: markRaw(UploadImage),
  },
})

export default elComponents
